<template>
  <div class="goods-main">
    <!-- 换购 -->
    <div class="goods-block">
      <!-- 头部 -->
      <div class="goods-title">
        <h3>全球换购</h3>
        <div class="goods-record">
          <p>已满1件，可选择10件商品换购</p>
          <div class="replace">
            <span>去换购</span>
            <b>></b>
          </div>
        </div>
      </div>

      <div class="change">
        <van-card :key="n" v-for="n in 3" style="flex-shrink: 0" price="2.00" desc="描述信息" title="商品标题"
          thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
          <template #num>
            <van-icon name="cart-circle-o" class="add-good" />
          </template>
        </van-card>
      </div>
    </div>

    <!-- 包邮 -->
    <div class="goods-block good">
      <!-- 头部 -->
      <div class="goods-title">
        <!-- <van-checkbox name="a"> -->
        <h3>99元包邮</h3>
        <!-- </van-checkbox> -->
        <div class="goods-record">
          <p>还差69.10元包邮</p>
          <div class="replace">
            <span>去凑单</span>
            <b>></b>
          </div>
        </div>
      </div>

      <!-- 商品 -->
      <div class="goods-info" v-for="item in cartInfoList" :key="item.id">
        <van-checkbox v-model="item.isChecked" class="check" @click="checkCartInfoState(item)" />

        <!-- 商品单项 -->
        <van-swipe-cell class="good-item">
          <van-card :price="item.skuPrice" :desc="item.operateTime" :title="item.skuName" class="goods-card"
            :thumb="item.imgUrl">
            <template #num>
              <div class="change-num">
                <a href="javascript:void(0)" class="mins" @click="changeSkuNum('decrement', item)">-</a>
                <input autocomplete="off" type="text" :value="item.skuNum" @change="changeSkuNum('change', item)"
                  minnum="1" />
                <a href="javascript:void(0)" class="plus" @click="changeSkuNum('increment', item)">+</a>
              </div>
            </template>
          </van-card>

          <!-- 底部卡券 -->
          <div class="goods-coupons">
            <img src="https://yanxuan.nosdn.127.net/static-union/1660720775214e32.png" alt="" />
            <p>不可用卡券/红包/礼品卡</p>
          </div>

          <!-- 滑动删除 -->
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" />
          </template>
        </van-swipe-cell>
      </div>
    </div>

    <!-- 空状态 -->
    <van-empty v-if="false" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
      description="添加点什么吧" />
  </div>

  <!-- 提交订单栏 -->
  <van-submit-bar :price="selectMoney" button-text="提交订单" @submit="onSubmit">
    <van-checkbox v-model="checkAll">全选</van-checkbox>
    <template #tip>
      你的收货地址不支持配送, <span @click="onClickLink">修改地址</span>
    </template>
  </van-submit-bar>
</template>


<script setup lang="ts">
import { onMounted, ref, computed } from "vue";
import { useRouter } from "vue-router";
import {
  reqGetShopCartListData,
  reqAddOrUpdateSkuInfoToShopCart,
  reqUpdateAllSkuInfoState,
  reqUpdateSkuInfoState,
} from "@/api/index";

const router = useRouter();
// 是否展示购物车商品的加加减减
const isShow = ref(true);
// 购物车数据
const cartInfoList = ref([]);
const skuId = ref(0);
const leftCartInfoList = ref([]); //剩余没有被删除的数据
const timeId = ref(0); //定时器
const num = ref(0); //商品数量

const loading = ref(false);
const finished = ref(false);

// 0.获取购物车数据
const getShopCartListData = async () => {
  const res = await reqGetShopCartListData();
  console.log("res", res);
  // 将数据保存到本地
  cartInfoList.value = res.data[0].cartInfoList ?? res.data[0].cartInfoList;
};

// 1.订单栏中的提交订单
const onSubmit = () => {
  // 路由跳转
  router.push("/address");
  // showToast('点击按钮')
  console.log("订单栏中的提交订单");
};
// 2.订单栏中的修改地址
const onClickLink = () => {
  // showToast('修改地址')
  console.log("订单栏中的修改地址");
};

// 3. 选中与 取消选 中
const checkCartInfoState = async (cartInfo) => {
  // console.log('切换了...')
  let checked = cartInfo.isChecked;
  const res = await reqUpdateSkuInfoState(cartInfo.skuId, +checked);
  // if (res.code === 200) {
  //   // 由服务器端最新的数据来渲染
  //   this.getShopCartListData()
  // }

  // 可以少发一次请求 直接让页面按钮变成另一种状态
  cartInfo.isChecked = checked;
};

// 4.购物车商品数量的加加减减
const changeSkuNum = (type, cartInfo) => {
  // 还可以使用switch-case 来处理 来处理定值的判断
  // let num = 0; // 定义一个变量 赋初始值为0
  switch (type) {
    case "decrement":
      // 减少数量
      if (cartInfo.skuNum > 1) {
        cartInfo.skuNum--;
        // num--;
        num--;
      }

      break;
    case "increment":
      // 增加数量  注释掉的是原来的做法
      // if (cartInfo.skuNum < 200) {
      //   cartInfo.skuNum++;
      //   num++;
      // }

      if (cartInfo.skuNum < 200) {
        cartInfo.skuNum++;
        num++; // 差值不断的累加
      }
      break;
    // case 'change':
    //   // 直接更改数量
    //   let newValue = event.target.value;
    //   let oldValue = cartInfo.skuNum;
    //   if (skuNumReg.test(newValue)) {
    //     // 验证通过 说明是数字
    //     cartInfo.skuNum = event.target.value - 0; // 转换成数字类型
    //     // num = cartInfo.skuNum - oldValue;
    //     this.num = cartInfo.skuNum - oldValue;
    //     if (cartInfo.skuNum > 200) {
    //       cartInfo.skuNum = 200;
    //       // num = 200 - oldValue;
    //       this.num = 200 - oldValue;
    //     }
    //   } else {
    //     // 否则就是非数字或是非法值  让skuNum还等于原值
    //     // 赋原值是赋值不上的 赋值不成功
    //     // cartInfo.skuNum = oldValue

    //     // 只能通过此种方式来进行赋值
    //     event.target.value = oldValue; // 是让页面中看起来的数据和原来还是一样的
    //     // num = 0
    //   }

    //   break;
  }

  // if(num===0) return // 不要再发送请求了
  if (num === 0) return; // 不要再发送请求了
  // 最后将更改后的数据发送给服务器 是更改后的差值数据 不是显示出来的数据
  if (timeId) clearTimeout(timeId);
  timeId = setTimeout(async () => {
    const res = await reqAddOrUpdateSkuInfoToShopCart(cartInfo.skuId, num);

    num = 0; // 一定要让this.num重置为0
  }, 500);
};

// 手动添加商品
const additem = async () => {
  let res = await reqAddOrUpdateSkuInfoToShopCart("17", 1);
  console.log(res);
  await reqAddOrUpdateSkuInfoToShopCart("22", 2);
  await reqAddOrUpdateSkuInfoToShopCart("28", 1);
};

const checkAll = computed({
  // 1. 全选与全不选
  get() {
    return cartInfoList.value.every((item) => item.isChecked === 1);
  },
  async set(val) {
    // 当总按钮被选中的时候，则所有的小按钮也要被选中
    // console.log(val)
    // this.cartInfoList.forEach(item=>item.isChecked=val)
    let isChecked = val ? 1 : 0;
    // this.cartInfoList.forEach(item => {
    //   item.isChecked=isChecked
    //   // reqUpdateSkuInfoState(item.skuId, isCheck)
    //   this.checkCartInfoState({skuId:item.skuId,isChecked:1 - isChecked})
    // })

    // 批量更改商品选 中的状态
    const skuIdList = [];
    cartInfoList.value.forEach((item) => {
      console.log(item.isChecked);
      item.isChecked = isChecked;
      skuIdList.push(item.skuId);
    });

    // 发送请求批量更新
    const res = await reqUpdateAllSkuInfoState(isChecked, skuIdList);
  },
});
// 2. 统计选中的总数量
const selectCount = computed(() => {
  return cartInfoList.value.reduce((prev, item) => prev + item.isChecked, 0);
});
// 3. 计算选中商品的总金额
const selectMoney = computed(() => {
  return cartInfoList.value.reduce(
    (prev, item) => (prev + item.skuPrice * item.skuNum * item.isChecked) * 10,
    0
  );
});

onMounted(() => {
  // additem()
  getShopCartListData();
});
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}

.goods-main {
  background-color: #f4f4f4;
  padding: 10px 20px;
  padding-bottom: 140px;

  .goods-block {
    padding: 5px;
    border: 2px solid;
    border-radius: 8px;
    margin-bottom: 20px;
    background-color: white;

    .goods-title {
      margin-bottom: 10px;
      font-size: 12px;
      display: flex;
      justify-content: space-between;

      .goods-record {
        display: flex;

        .replace {
          margin-left: 10px;
          color: red;
        }
      }
    }

    // 商品信息
    .goods-info {
      display: flex;
      justify-content: space-between;

      .good-item {
        flex: 1;

        .goods-card {
          margin: 0;
          padding: 0;

          // 加加减减
          .change-num {
            // display: flex;
            margin-right: 16px;
            margin-bottom: 8px;
            border: 1px solid;
            border-radius: 8px;
            text-align: center;
            color: black;
            font-size: 14px;

            .mins {
              border: 1px solid #ddd;
              border-right: 0;
              float: left;
              color: #666;
              text-align: center;
              padding: 0 8px;
            }

            input {
              border: 1px solid #ddd;
              width: 30px;
              // height: 20px;
              text-align: center;
              font-size: 14px;
            }

            .plus {
              border: 1px solid #ddd;
              border-left: 0;
              color: #666;
              text-align: center;
              padding: 0 8px;
            }
          }
        }

        // 商品卡券
        .goods-coupons {
          display: flex;
          font-size: 12px;
          color: #bab8b8;
          text-align: center;
          margin-top: 5px;

          img {
            width: 12px;
            height: 12px;
            margin-top: 2px;
            margin-right: 5px;
          }
        }

        // 滑动删除样式
        .delete-button {
          height: 80%;
          right: -2px;
        }
      }

      // 选中
      .check {
        margin-right: 10px;
      }
    }

    // 换购
    .change {
      display: flex;
      overflow-x: scroll;

      // 消除滚动条
      &::-webkit-scrollbar {
        width: 0;
      }

      .add-good {
        font-size: 25px;
        color: red;
      }

      .van-card {
        border: solid 1px;
        width: 300px;
        border-radius: 12px;
        margin: 0 10px;
        padding: 10px;
      }

      // 右下角商品个数位置
      :deep(.van-card__num) {
        margin-right: 16px;
        margin-bottom: 8px;
        border: none;
      }

      // 描述设置
      :deep(.van-card__desc) {
        border: none;
        width: 70%;
        color: red;
        text-align: left;
        margin-top: 7px;
      }
    }
  }
}
</style>

<style lang="less" >
// 设置卡片中标题位置

.van-card__title {
  padding-top: 6px;
  font-size: 14px;
}

// 描述设置
.van-card__desc {
  border: 1px solid;
  border-radius: 10px;
  width: 30%;
  text-align: center;
  margin-top: 7px;
}

// 价格设置
.van-card__price {
  color: red;
  margin-top: 0px;
}

// 提交订单防止遮盖导航
.van-submit-bar {
  bottom: 50px;
}

// 设置多选框的宽度占满
.van-checkbox__label {
  width: 100%;
}
</style>